<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				outline: none;
			}
			#box{
				border-collapse: collapse;
				margin: auto;
				text-align: center;
			}
			td {
				border: 1px solid #ccc;
			}
			#ss{
				border: none;
			}
		</style>
	</head>
	<body>
		
		<table id="box" width="70%" height=100% align="center">
			<!-- 第二个问题点，对于我们需要动态修改的数据，我们将其通过vue实例接管，其他的静态显示的数据，直接HTML定义就好，另外关于用户的界面设计，尽可能从用户角度，从实际应用出发 -->
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>学号</td>
				<td>班级</td>
				<td>操作</td>
			</tr>
			<!-- 第一个问题点：：key值定义 -->
			<!-- 第三个问题点：v-for遍历的对象的区别 关于计算属性与方法，尽可能用计算属性来实现-->
			<tr v-for="(item,index) in shuju1" :key='item.xuehao'>
				<td>
					{{index+1}}
				</td>
				<td>
					{{item.name}}
				</td>
				<td>
					{{item.xuehao}}
				</td>
				<td>
					{{item.banji}}
				</td>
				<td id="yc" @click="sdelete($event)">移除</td>
			</tr> 
			<tr>
				<td colspan="5" id="ss">
					<input type="text"
					 placeholder="请输入姓名"
					 v-model="chakan"
					 @input="chazhao"
					/>
				</td>
			</tr>
		</table>
	
		<script>
			Vue.config.productionTip=false
			new Vue({
				el:"#box",
				data:{
					shuju:[{
						name: "陈玉林",
						xuehao: "21805200101",
						banji: "18高计应",
					},
					{
						name: "邓婷",
						xuehao: "21805200102",
						banji: "18高计应",
					},
					{
						name: "邓组方",
						xuehao: "21805200103",
						banji: "18高计应",
					},
					{
						name: "樊家俊",
						xuehao: "21805200104",
						banji: "18高计应",
					},
					{
						name: "甘思思",
						xuehao: "21805200105",
						banji: "18高计应",
					},
					{
						name: "郭锟",
						xuehao: "21805200106",
						banji: "18高计应",
					},
					{
						name: "何柳炀",
						xuehao: "21805200107",
						banji: "18高计应",
					},
					{
						name: "林鑫",
						xuehao: "21805200108",
						banji: "18高计应",
					},
					{
						name: "刘雯云",
						xuehao: "21805200109",
						banji: "18高计应",
					},
					{
						name: "卢双禧",
						xuehao: "21805200110",
						banji: "18高计应",
					}
					],
					shuju1:[],
					chakan:''
				},
				created(){
					if(this.chakan=='')
					{
						this.shuju1=this.shuju
					}
				},
				methods:{
					sdelete(e){
						e.target.parentNode.parentNode.removeChild(e.target.parentNode)
					},
					chazhao(){
						if(this.chakan=='')
						{
							this.shuju1=this.shuju;
						}
						else{
							let shuju=[];
							for(let item of this.shuju){
								if(item.name.indexOf(this.chakan)!=-1){
									shuju.push(item);
								}
							}
							this.shuju1=shuju;
						}
					}
				}
			})
		</script>
	</body>
</html>